<template>
	<view class="search_index">
		<NavBar title="搜索页面" @clickRightFn='clickRightFn' rightIcon='plus' />

		<!-- 搜索 1 -->
		<Search @searchList='searchList' />

		<!-- 数据列表 1 -->
		<view class="list">
			<view v-if="!total">
				<NoData />
			</view>
			<view v-else class="item" v-for="(i,index) in listArr" :key="index">
				<StudyItem :itemObj='i' @click='clickItemObj(i)' :isDrafts='true' />
			</view>

		</view>
		<!-- 数据列表 2 -->
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue';
	import StudyItem from './common/study_item.vue';
	import Search from './common/search.vue';
	import NoData from '@/components/NoData';

	import {
		apiStudyList, // 列表
		apiEducationList, // 学习类型
	} from "@/net/educationalLearning.js"

	export default {
		components: {
			NavBar,
			StudyItem,
			NoData,
			Search
		},
		data() {
			return {
				typeList: [],
				listArr: [],
				total: 0,
				params: {
					title: "",
					pageNum: 1,
					pageSize: 10,
				}
			}
		},

		methods: {
			// 查看详情
			clickItemObj(item) {
				let params = {
					...item,
					flag: false
				}
				uni.setStorage({
					key: "itemParams",
					data: JSON.stringify(params),
				});
				uni.navigateTo({
					url: `./historyInfo`,
				})
			},

			// 点击搜索
			searchList(e) {
				this.params.title = e;
				this.listArr = [];
				this.getStudyList();
			},

			getStudyList() {
				apiStudyList(this.params)
					.then((res) => {
						if (res.code === 0) {
							this.total = res.total;
							this.listArr = this.listArr.concat(res.data);

							// 处理学习类型
							for (let i = 0; i < this.listArr.length; i++) {
								for (let k = 0; k < this.typeList.length; k++) {
									if (this.listArr[i].learningType == this.typeList[k].key) {
										this.listArr[i].Type = this.typeList[k].value;
									}
								}
							}
							uni.stopPullDownRefresh();
						} else {
							uni.showToast({
								title: '搜索失败',
								icon: 'error',
								duration: 1000
							});
							this.total = 0;
							this.listArr = [];
						}
					}).catch((err) => {
						console.log(err);
						uni.showToast({
							title: '搜索失败',
							icon: 'error',
							duration: 1000
						});
						this.total = 0;
						this.listArr = [];
					});
			},

			// 学习类型
			getEducationList() {
				apiEducationList()
					.then((res) => {
						if (res.code === 0) {
							this.typeList = res.data;
							this.getStudyList();
						} else {
							this.typeList = [];
						}
					}).catch((err) => {
						console.log(err);
						this.typeList = [];
					});
			},

			clickRightFn() {
				console.log('点击右边');
			},
		},
		onLoad() {
			this.getEducationList();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.params.pageSize = 10;
			this.params.pageNum = 1;
			this.params.title = "";
			this.listArr = [];
			this.getStudyList();
		},
		// 上拉加载
		onReachBottom() {
			if (this.params.pageNum * this.params.pageSize >= this.total) {
				uni.showToast({
					title: '数据全部加载',
					duration: 2000
				});
			} else {
				this.total = 0;
				this.params.pageNum++;
				this.getStudyList();
			}
		},
	}
</script>

<style>
	page {
		height: 100vh !important;
		background: #F9F9F9;
		font-size: 28rpx;
		color: #999999;
	}

	.search_index {
		overflow-y: scroll;
	}

	/* 数据列表 2 */

	.list {
		width: 750rpx;
		background: #fff;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.item {
		border-bottom: 1px solid #f1f1f1;
	}

	.item:last-child {
		border: none;
	}
</style>